<template>
  <div class="DAHe">
    <van-checkbox-group v-model="result">
      <van-checkbox
        :name="item"
        v-for="item in cartList"
        :key="item.id"
        @click="DanXan"
        label-disabled
        icon-size="25px"
      >
        <van-swipe-cell
          ><van-card
            :num="item.number"
            :price="item.market_price"
            :title="item.goods_name"
            class="goods-card"
            :thumb="item.list_pic_url"
          >
            <template #num>
              <van-stepper
                v-model="item.number"
                integer
                @plus="JIaJIan(item)"
                @minus="JIaJIan(item)"
                @blur="JIaJIan(item)"
                async-change
                :long-press="false"
              /> </template
          ></van-card>

          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              class="delete-button"
              @click="ShanChu(item)"
            />
          </template>
        </van-swipe-cell>
      </van-checkbox>
    </van-checkbox-group>
    <!-- 底部提交 -->
    <van-submit-bar :price="JiSUan" button-text="提交订单" @submit="onSubmit">
      <van-checkbox v-model="checked" @click="checkedFn">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>
import { getCarData } from "@/utils/http";

// 引入商品步进器的接口
import { GoBJQLogin } from "@/utils/http";

// 引入购物车删除商品的接口
import { getSHanCHuDelete } from "@/utils/http";

export default {
  name: "GouWuChe",
  data() {
    return {
      result: [], //选中商品的集合
      cartList: [], //购物车数组
      checked: false, //全选
      value: 1,
      // goodsId: "", //商品id
    };
  },
  created() {
    getCarData().then((res) => {
      // console.log(res);
      this.cartList = res.data.data.cartList;
      // this.goodsId = res.data.data.cartList.
    });
  },
  methods: {
    onSubmit() {
      // 提交订单
    },
    onClickEditAddress() {
      // 修改地址
    },
    checkedFn() {
      // 全选的事件
      // 获取全选的状态
      // console.log(this.checked);
      if (this.checked) {
        this.result = this.cartList;
      } else {
        this.result = [];
      }
    },
    DanXan() {
      // 单选
      // console.log(this.result);
      // 没选中一个商品this.result的长度就会加一，判断它的长度如果等于获取的商品的数组就把全选状态设置为true
      if (
        this.result.length == this.cartList.length &&
        this.cartList.length != 0
      ) {
        this.checked = true;
      } else {
        this.checked = false;
      }
    },
    JIaJIan(item) {
      // 步进器
      GoBJQLogin({
        goodsId: item.goods_id,
        id: item.id,
        number: item.number,
        productId: item.product_id,
      }).then((res) => {
        // console.log(res);
      });
    },
    // 删除商品
    ShanChu(item) {
      // console.log(String(item.product_id));
      getSHanCHuDelete({ productIds: String(item.product_id) }).then((res) => {
        this.cartList = res.data.data.cartList;
      });
    },
  },
  // 计算属性
  computed: {
    // 当依赖的属性发生变化，计算属性会重新计算
    JiSUan() {
      //根据选中 的单价乘以数量累加就是 总价
      let sum = 0; //定义一个总价
      this.result.forEach((item) => {
        // 遍历数组，获取价格和数量的乘积和
        // 乘100是为了有小数点
        sum += item.retail_price * item.number * 100;
      });
      return sum;
    },
  },
};
</script>

<style lang='less' scoped>
/deep/.van-checkbox__label {
  flex: 1;
}
/deep/.van-submit-bar {
  bottom: 50px;
}
.van-card {
  position: relative;
}
/deep/.van-button--normal {
  right: 0;
}
.delete-button {
  height: 100%;
}
.DAHe {
  padding-bottom: 49px;
}
</style>